<template>
	<cxView :margin="margin" :padding="padding">
		<uni-row>
			<uni-col :span="titleWidth">
				<cxView :height="height" width="100%">
					{{title}}
					<slot name="left" />
				</cxView>
			</uni-col>
			<uni-col :span="24-titleWidth">
				<cxView id="my-row" width="100%">
					<slot name="right" />
				</cxView>
			</uni-col>
		</uni-row>

	</cxView>
</template>

<script>
	export default {
		data() {
			return {
				height: 40,

			}
		},
		props: {

			title: {
				type: String,
				default: ''
			},
			/**
			 * 最大宽度24
			 */
			titleWidth: {
				type: Number,
				default: 4
			},
			margin: {
				type: String,
				default: ''
			},
			padding: {
				type: String,
				default: ''
			},


		},
		mounted() {

			let that = this;
			this.$nextTick(() => {
				// this.timer = setTimeout(() => {
				this.createSelectorQuery().select("#my-row").boundingClientRect(function(rect) {
					console.log(rect);
					that.height = rect.height * 2
					console.log(that.height)

				}).exec();
				// }, 0)
			})
			console.log('mounted');

		},
		methods: {

		}
	}
</script>

<style>

</style>